<template>
  <view class="login-page">
    <view class="login-container">
      <image class="logo" src="../../static/images/faefca70015700a93249edebf71899e6.png"/>

      <view class="input-group">
        <input class="input-field" v-model="phone" maxlength="11" placeholder="账号"/>
        <view class="password">
          <input :password="!showPassword" v-model="password" placeholder="密码"/>
          <uni-icons class="icon" :type="showPassword?'eye':'eye-slash'" size="40rpx" color="#7a7777"
                     @click="showPassword = !showPassword"></uni-icons>
        </view>
        <text class="forgot-password" @click="forget()">忘记密码</text>
      </view>

      <view class="button-group">
        <view class="login-button" @click="loginin()">
          <text class="login-text">登 录</text>
        </view>
        <view class="navigation-links">
          <text @click="navTo('/pages/register/register')">立即注册</text>
          <text @click="navTo('/pages/login/login2')">手机号登录</text>
        </view>
      </view>

      <view class="agreement-section">
        <view class="agreement" @click="checkeAccept = !checkeAccept">
          <uni-icons v-if="!checkeAccept" type="circle"></uni-icons>
          <uni-icons v-if="checkeAccept" color="red" type="checkbox-filled"></uni-icons>
          <text class="text">已阅读并同意</text>
        </view>
        <text class="link" @click="navTo('/pages/agreement/agreement')">《用户协议》和《隐私政策》</text>
      </view>
    </view>
  </view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
import {_login} from "@/service/user.js";
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";

export default {
  components: {UniIcons},
  data() {
    return {
      phone: '',
      password: '',
      checkeAccept: false,
      showPassword: false
    };
  },
  created() {
    try {
      const value = uni.getStorageSync('userInfo');
      if (value !== '' && value) {
        this.login(value);
        uni.switchTab({
              url: '/pages/index1/index1',
              success: (res) => {
                console.log("跳转成功", res);
                // ifdef APP-PLUS
                plus.navigator.closeSplashscreen();//关闭启动屏幕
                // endif
              }
            }
        );
      }else {
        // ifdef APP-PLUS
        plus.navigator.closeSplashscreen();//关闭启动屏幕
        // endif
      }
    } catch (e) {
      console.error(e);
    }
  },
  computed: {
    ...mapState(['hasLogin'])
  },
  methods: {
    ...mapMutations(['login']),
    forget() {
      this.navTo('/pages/yanzhengmaxiugaimima/yanzhengmaxiugaimima');
    },
    navTo(url) {
      uni.navigateTo({url});
    },
    judgeAgree() {
      if (!this.checkeAccept) {
        this.$api.msg('请先确认授权');
        return false;
      }
      return true;
    },
    validPhone(phone) {
      const rule = /^1[3456789]\d{9}$/;
      if (!phone) {
        this.$api.msg('手机号码不能为空');
        return false;
      } else if (!rule.test(phone)) {
        this.$api.msg('请输入正确的手机号码');
        return false;
      }
      return true;
    },
    validIsEmpty(str, tip) {
      if (!str) {
        this.$api.msg(`${tip}不能为空`);
        return false;
      }
      return true;
    },
    async loginin() {
      if (this.judgeAgree() && this.validPhone(this.phone) && this.validIsEmpty(this.password, "登陆密码")) {
        uni.showLoading({title: '登录中...'});
        const res = await _login({account_user: this.phone, password_user: this.password});
        uni.hideLoading();
        this.$api.msg(res.flag ? '登录成功！' : res.message);
        if (res.flag) {
          this.comFun(res.data);
        }
      }
    },
    comFun(data) {
      const newdata = {
        name: data.name_user,
        nickname: data.nickname_user,
        accountNum: data.account_user,
        password: data.password_user,
        gender: data.gender_user,
        headPhoto: data.photo_user,
        registerTime: data.registertime_user,
      };
      //缓存用户信息
      uni.setStorage({
        key: 'userInfo',
        data: newdata
      });
      this.login(newdata);
      uni.switchTab({url: '/pages/index1/index1'});
    },
  }
};
</script>

<style scoped lang="scss">
.login-page {
  background-color: #ffffff;
  width: 100%;
  height: 72.5vh;
}

.login-container {
  width: 100%;
  height: 100%;
  padding: 10% 7.5%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .logo {
    border-radius: 50%;
    width: 155rpx;
    height: 155rpx;
  }

  .input-group {
    width: 100%;
    margin-top: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    .input-field {
      width: 100%;
      padding: 20rpx 0 20rpx;
      margin-top: 80rpx;
      color: #7a7777;
      border-bottom: solid #138f8780;
      font-size: 37.5rpx;
    }

    .password {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-top: 80rpx;
      padding: 20rpx 0 20rpx;
      border-bottom: solid #138f8780;

      input {
        width: 100%;
        color: #7a7777;
        font-size: 37.5rpx;
      }

      .icon {
        padding: 5rpx;
      }
    }

    .forgot-password {
      color: #808080;
      margin-top: 20rpx;
      font-size: 30rpx;
    }
  }


  .button-group {
    width: 100%;
    margin-top: 92rpx;

    .login-button {
      padding: 30rpx 0;
      background-color: #138f87;
      border-radius: 55rpx;
      text-align: center;

      .login-text {
        color: #ffffff;
        font-size: 37.5rpx;
        line-height: 33rpx;
      }
    }

    .navigation-links {
      display: flex;
      justify-content: space-between;
      padding-top: 33rpx;
      color: #808080;
    }
  }

  .agreement-section {
    margin-top: 185rpx;
    display: flex;
    align-items: center;
    font-size: 25rpx;

    .agreement {
      display: flex;
      align-items: center;
      padding: 20rpx;
      color: #333232;

      .text {
        margin-left: 20rpx;
      }
    }

    .link {
      color: #0B97C4;
    }
  }
}
</style>
